<template>
    <div>
        <h2 class="h" style="color:#f49">成绩新增</h2>

        <div class="main">
            <el-form :model="form" label-width="120px">
                <el-form-item label="项目名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="项目地址">
                    <el-input v-model="form.address" />
                </el-form-item>
                <el-form-item label="项目类别">
                    <el-input v-model="form.type" />
                </el-form-item>
                <el-form-item label="项目技术">
                    <el-input v-model="form.jishu" />
                </el-form-item>
                <el-form-item label="项目亮点">
                    <el-input v-model="form.brightened" />
                </el-form-item>
                <el-form-item label="项目BUG">
                    <el-input v-model="form.bug" />
                </el-form-item>
                <el-form-item label="项目细节">
                    <el-input v-model="form.particulars" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                    <el-button type="info" plain @click="resetting">重置</el-button>
                </el-form-item>
            </el-form>

        </div>

    </div>
</template>

<script setup>
import { reactive } from "vue"

let form = reactive({
    name: "",
    address: "",
    type: "",
    jishu: "",
    brightened: "",
    bug: "",
    particulars: ""
})

let submit = () => {
    console.log("提交事件");
}
let resetting = () => {
    console.log("重置");
    form.name = "",
        form.address = "",
        form.type = "",
        form.jishu = "",
        form.brightened = "",
        form.bug = "",
        form.particulars = ""

}


</script>

<style lang="scss" scoped>
.h {
    font-weight: 600;
    font-size: 25px;
}


.main {
    width: 1000px;
    height: 500px;
    margin-top: 20px;
    // border: 1px solid gray;

    // background-color: gray;
}
</style>